<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js 文件 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- comvies 是props里面的自定义变量名 通过v-bind把实例data中的movies传递给comvies -->
        <cpn :cmovies="movies"></cpn>
    </div>

    <template id="cpn">
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
    </template>

    <script>
        // 父传子：props 可以是数组类型 又可以是对象类型
        const cpn1 = {
            // template绑定id
            template: '#cpn',
            // props: ['cmovies']
            props: {
                // 1. 对象类型的props 可以限制传递过来变量的类型
                // cmovies: Array,

                // 2. 提供一些默认值
                cmovies: {
                    // type 类型
                    type: Array,
                    // default 如果没有子传递过来就默认是aa
                    default() {
                        return []
                    },
                    // required 如果变量加个这个属性 使用组件的时候就必须传这个变量
                    required: true
                }
            }
        }

        const app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue",
                movies: ['海王', '海贼王', '海尔兄弟']
            },
            components: {
                cpn: cpn1
            }
        });
    </script>
</body>

</html>